"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { SaveIcon, RefreshCwIcon, BellIcon, DatabaseIcon, WifiIcon, ShieldIcon } from "lucide-react"
import DashboardLayout from "@/components/dashboard-layout"

// 模拟数据
const mockSettings = {
  system: {
    language: "zh",
    theme: "light",
    notifications: true,
    autoUpdate: true,
  },
  irrigation: {
    defaultDuration: 30,
    minMoisture: 20,
    maxMoisture: 35,
    alertThreshold: 15,
  },
  network: {
    apiEndpoint: "http://localhost:8080/api",
    refreshInterval: 5,
    timeout: 30,
  },
  backup: {
    autoBackup: true,
    backupInterval: 24,
    keepDays: 7,
  },
}

export default function SettingsPage() {
  const [settings, setSettings] = useState(mockSettings)

  const handleSystemChange = (key: string, value: any) => {
    setSettings({
      ...settings,
      system: {
        ...settings.system,
        [key]: value,
      },
    })
  }

  const handleIrrigationChange = (key: string, value: any) => {
    setSettings({
      ...settings,
      irrigation: {
        ...settings.irrigation,
        [key]: value,
      },
    })
  }

  const handleNetworkChange = (key: string, value: any) => {
    setSettings({
      ...settings,
      network: {
        ...settings.network,
        [key]: value,
      },
    })
  }

  const handleBackupChange = (key: string, value: any) => {
    setSettings({
      ...settings,
      backup: {
        ...settings.backup,
        [key]: value,
      },
    })
  }

  return (
    <DashboardLayout>
      <div className="p-6 space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold">系统设置</h1>
          <div className="flex gap-2">
            <Button variant="outline" size="sm">
              <RefreshCwIcon className="h-4 w-4 mr-2" />
              重置
            </Button>
            <Button size="sm">
              <SaveIcon className="h-4 w-4 mr-2" />
              保存更改
            </Button>
          </div>
        </div>

        <Tabs defaultValue="system">
          <TabsList>
            <TabsTrigger value="system">基本设置</TabsTrigger>
            <TabsTrigger value="irrigation">灌溉参数</TabsTrigger>
            <TabsTrigger value="network">网络设置</TabsTrigger>
            <TabsTrigger value="backup">备份设置</TabsTrigger>
          </TabsList>

          <TabsContent value="system">
            <Card>
              <CardHeader>
                <CardTitle>基本设置</CardTitle>
                <CardDescription>配置系统基本参数</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <Label>系统语言</Label>
                  <Select
                    value={settings.system.language}
                    onValueChange={(value) => handleSystemChange("language", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="zh">中文</SelectItem>
                      <SelectItem value="en">English</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label>界面主题</Label>
                  <Select
                    value={settings.system.theme}
                    onValueChange={(value) => handleSystemChange("theme", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="light">浅色</SelectItem>
                      <SelectItem value="dark">深色</SelectItem>
                      <SelectItem value="system">跟随系统</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>系统通知</Label>
                    <p className="text-sm text-gray-500">接收系统重要通知和警报</p>
                  </div>
                  <Switch
                    checked={settings.system.notifications}
                    onCheckedChange={(checked) => handleSystemChange("notifications", checked)}
                  />
                </div>

                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>自动更新</Label>
                    <p className="text-sm text-gray-500">自动安装系统更新</p>
                  </div>
                  <Switch
                    checked={settings.system.autoUpdate}
                    onCheckedChange={(checked) => handleSystemChange("autoUpdate", checked)}
                  />
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="irrigation">
            <Card>
              <CardHeader>
                <CardTitle>灌溉参数</CardTitle>
                <CardDescription>配置灌溉系统的默认参数</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <Label>默认灌溉时长 (分钟)</Label>
                  <Input
                    type="number"
                    value={settings.irrigation.defaultDuration}
                    onChange={(e) => handleIrrigationChange("defaultDuration", parseInt(e.target.value))}
                  />
                </div>

                <div className="space-y-4">
                  <Label>土壤湿度范围 (%)</Label>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>最小值: {settings.irrigation.minMoisture}%</span>
                      <span>最大值: {settings.irrigation.maxMoisture}%</span>
                    </div>
                    <Slider
                      value={[settings.irrigation.minMoisture, settings.irrigation.maxMoisture]}
                      onValueChange={([min, max]) => {
                        handleIrrigationChange("minMoisture", min)
                        handleIrrigationChange("maxMoisture", max)
                      }}
                      min={0}
                      max={100}
                      step={1}
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>警报阈值 (%)</Label>
                  <Input
                    type="number"
                    value={settings.irrigation.alertThreshold}
                    onChange={(e) => handleIrrigationChange("alertThreshold", parseInt(e.target.value))}
                  />
                  <p className="text-sm text-gray-500">当土壤湿度低于此值时触发警报</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="network">
            <Card>
              <CardHeader>
                <CardTitle>网络设置</CardTitle>
                <CardDescription>配置系统网络连接参数</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <Label>API 地址</Label>
                  <Input
                    value={settings.network.apiEndpoint}
                    onChange={(e) => handleNetworkChange("apiEndpoint", e.target.value)}
                  />
                </div>

                <div className="space-y-2">
                  <Label>数据刷新间隔 (秒)</Label>
                  <Input
                    type="number"
                    value={settings.network.refreshInterval}
                    onChange={(e) => handleNetworkChange("refreshInterval", parseInt(e.target.value))}
                  />
                </div>

                <div className="space-y-2">
                  <Label>请求超时时间 (秒)</Label>
                  <Input
                    type="number"
                    value={settings.network.timeout}
                    onChange={(e) => handleNetworkChange("timeout", parseInt(e.target.value))}
                  />
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="backup">
            <Card>
              <CardHeader>
                <CardTitle>备份设置</CardTitle>
                <CardDescription>配置系统数据备份参数</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>自动备份</Label>
                    <p className="text-sm text-gray-500">定期自动备份系统数据</p>
                  </div>
                  <Switch
                    checked={settings.backup.autoBackup}
                    onCheckedChange={(checked) => handleBackupChange("autoBackup", checked)}
                  />
                </div>

                <div className="space-y-2">
                  <Label>备份间隔 (小时)</Label>
                  <Input
                    type="number"
                    value={settings.backup.backupInterval}
                    onChange={(e) => handleBackupChange("backupInterval", parseInt(e.target.value))}
                    disabled={!settings.backup.autoBackup}
                  />
                </div>

                <div className="space-y-2">
                  <Label>保留时间 (天)</Label>
                  <Input
                    type="number"
                    value={settings.backup.keepDays}
                    onChange={(e) => handleBackupChange("keepDays", parseInt(e.target.value))}
                    disabled={!settings.backup.autoBackup}
                  />
                  <p className="text-sm text-gray-500">自动删除超过保留时间的备份</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
} 